<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{ margin: 0; padding: 0; }
		.big-ban{ width: 840px; height:400px ; border:1px solid #000000;margin: 100px auto; position: relative; overflow: hidden; padding: 35px 10px 0 10px; border-radius: 15px;}
		.carousel{width: 828px; height: 370px; margin: 0 auto; position: relative; overflow: hidden;}
		.carousel ul.imageslist{position: absolute;top:0;left:0;list-style: none; width: 9000px;}
		.carousel ul.imageslist li{float: left;}
		.carousel .buttons a{display: block; width: 23px; height: 47px; background: url(img/icons.png) no-repeat; cursor: pointer;}
		.carousel .buttons .leftBtn{position: absolute; top: 50% ; left:10px; background-position: 0px -172px; margin-top: -23px;}
		.carousel .buttons .rightBtn{position: absolute; top: 50% ; right:10px; background-position: -23px -219px; margin-top: -23px;}
		.carousel .bg{position: absolute; bottom: 0 ; left: 0; width: 100%; height: 30px; background-color: black; opacity: 0.6; _filter:alpha(opacity=60);}
		.carousel .num{position: absolute; bottom: 0 ; right:0; width: 200px;height: 20px; }
		.carousel .num span{float: left; margin-right: 6px; width: 12px; height: 12px; background: white; background: url(img/icons.png) no-repeat 0 -12px;}
		.carousel .num span.cur{background-position:0 0; }
		.big-ban .closed{ width: 64px; height: 34px; background: rgba(0,0,0,0.5); position: absolute; right: 0; top: 0; color: white; line-height: 34px; text-align: center; font-weight: bold; cursor: pointer; border-bottom-left-radius: 15px;}
	</style>
	<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.easie.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			//全局变量
			var nowimg = 0;		//信号量，当前显示的图片序号
			var speed = 600;	//一张图片切换的毫秒数。
			var intervalTime = 2000;	//间隔时间

			//得到图片的总数量
			var imageAmount = $(".imageslist li").length;

			//克隆第一张图片，然后追加到最后一张去
			//clone()就是克隆，但是光克隆没有用，一定要把克隆的元素追加到原有的HTML中。
			//《锋利的jQuery》第62页~72页。稍微看看。
			$(".imageslist li:first").clone().appendTo(".imageslist");

			//得到所有元素，给变量名之前加$，是个约定。一眼就能知道，这个变量存放着jQuery元素。
			var $imagesList = $(".imageslist");
			var $circles = $(".num span");

			//右按钮的事件
			$(".rightBtn").click(rightBtnFunc);	//有名函数，不要加圆括号！！

			//我们把右按钮要做的事情，单独提炼出一个函数。起名字。
			//这么做的原因，是为了定时器的调用。
			function rightBtnFunc(){
				if(!$imagesList.is(":animated")){
					//分类讨论，现在到底到没到最后一张
					if(nowimg < imageAmount - 1){
						nowimg ++;
						//普通运动，拉到第nowimg这张图片上
						normalAnimate();	//调用函数，普通运动
					}else{
						nowimg = 0;
						//往第5张（假0）身上拉，然后瞬间切换到0。
						$imagesList.animate({"left" : imageAmount * -828} , speed ,"easieEaseInQuint", function(){
							//回调函数
							$(this).css("left" , 0);	//css是瞬间的
						});
					}
					changeCircle();	//调用函数，小圆点
				}
			}

			//左按钮
			$(".leftBtn").click(function(){
				if(!$imagesList.is(":animated")){
					//分类，判断现在是不是到头了
					if(nowimg > 0){
						nowimg --;
						normalAnimate();	//调用函数，普通运动
					}else{
						nowimg = imageAmount - 1;
						//到头了，让假0替换真0
						$imagesList.css("left" , imageAmount * -828);
						normalAnimate();	//调用函数，普通运动
					}
					changeCircle();	//调用函数，小圆点
				}
			});

			//小圆点的点击
			$(".num span").click(function(){
				if(!$imagesList.is(":animated")){
					nowimg = $(this).index();
					normalAnimate();//调用函数，普通运动
					changeCircle();	//调用函数，小圆点
				}
			});


			//普通运动，让火车往信号上拉
			function normalAnimate(){
				$imagesList.animate({"left" : nowimg * -828} , speed ,"easieEaseInQuint");
			}

			//小圆点函数，让信号量那个小圆点有cur，其余没有cur
			function changeCircle(){
				$circles.eq(nowimg).addClass("cur").siblings().removeClass("cur");
			}


			//定时器的业务
			var timer = setInterval(rightBtnFunc,intervalTime);

			//鼠标进入，停止
			$(".carousel").mouseenter(function(){
				clearInterval(timer);
			});

			//鼠标离开，继续
			$(".carousel").mouseleave(function(){
				clearInterval(timer);
				timer = setInterval(rightBtnFunc,intervalTime);
			});
			
			$('.closed').click(function(){
				$('.big-ban').hide(500);
			})
		});
	</script>
	</head>
	<body>
		<div class="big-ban">
			<div class="carousel">
				<ul class="imageslist">
					<li><a href="#"><img src="img/banner-1.jpg" /></a></li>
					<li><a href="#"><img src="img/banner-2.jpg" /></a></li>
					<li><a href="#"><img src="img/banner-3.jpg" /></a></li>
					<li><a href="#"><img src="img/banner-4.jpg" /></a></li>
					<li><a href="#"><img src="img/banner-5.jpg" /></a></li>
					<li><a href="#"><img src="img/banner-6.jpg" /></a></li>
					<li><a href="#"><img src="img/banner-7.jpg" /></a></li>
					<li><a href="#"><img src="img/banner-8.jpg" /></a></li>
					<li><a href="#"><img src="img/banner-9.jpg" /></a></li>	 
				</ul>
				<div class="buttons">
					<a class="leftBtn"></a>
					<a class="rightBtn"></a>
				</div>
				<div class="bg"></div>
				<div class="num">
					<span class="cur"></span>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</div>
			</div>
			<div class="closed">关闭</div>
		</div>
	</body>
</html>
